.login-container {
  background: url('../../assets/img/desktop-layout/light-bg.jpg');
  background-size: cover;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  &::before {
    content: '';
    width: 96%;
    height: 96%;
    background-image: url('../../assets/img/login/login-bg.svg');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
  }

  .login-inner-container {
    width: 660px;
    height: 370px;
    top: 50%;
    left: 50%;
    margin-left: -325px;
    margin-top: -220px;
    position: absolute;

    .login-box-card-box {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      padding: 5px;
      background: var(--login-border-bg);
      border-radius: 15px;
      box-shadow: var(--login-box-shadow);
      &::after {
        content: '';
        position: absolute;
        top: -300px;
        left: -100px;
        width: 900px;
        height: 900px;
        background: var(--login-rotate-border-bg);
        animation: rotateAnimation 2s linear infinite;
      }
      .login-box-card {
        width: 620px;
        height: 330px;
        position: absolute;
        z-index: 2;
        padding: 15px;
        background: var(--login-inner-bg);
        border-radius: 15px;
        box-shadow: var(--login-inset-box-shadow);
        .login-flex {
          display: flex;

          .login-img {
            background-image: url('../../assets/img/login/login-img.svg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 280px;
            height: 240px;
            margin-top: 38px;
            margin-right: 5px;
            //margin-left: 15px;
          }

          .login-form-box {
            width: max-content;
            margin-top: 25px;

            .login-title {
              width: 100%;
              color: var(--login-title-color);
              margin-bottom: 30px;
              text-align: center;
              font-weight: 500;
              font-size: 20px;
            }

            .login-form {
              width: 315px;
              margin-top: -5px;
              margin-left: 5px;

              .validate-code {
                display: flex;

                :deep(.el-input) {
                  width: 115px;
                }

                &-img {
                  width: 115px;
                  height: var(--el-component-size);
                  line-height: var(--el-component-size);
                  margin-left: 13px;
                  box-shadow: 0 0 0 1px var(--login-input-border-color) inset;
                  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
                  padding: 1px;
                  cursor: pointer;
                }
              }

              :deep(.el-form-item) {
                margin-bottom: 22px;
              }

              :deep(.el-button) {
                width: 100%;
              }

              :deep(.el-form-item__label){
                color: var(--login-text-color);
              }

              :deep(.el-input){
                --el-input-text-color:  var(--login-text-color);
                --el-input-hover-border: var(--login-input-hover-border-color);
                --el-input-border-color: var(--login-input-border-color);
                --el-input-bg-color: var(--login-input-bg);
                --el-input-icon-color: var(--login-input-icon-color);
                --el-input-placeholder-color: var(--login-input-placeholder);
                --el-input-hover-border-color:var(--login-input-hover-border-color);
                --el-input-clear-hover-color: var(--login-input-clear-hover-color);
              }
              :deep(.el-input__inner){
                color: var(--login-text-color);
              }
            }
          }
        }

        .login-copyright {
          font-size: 13px;
          text-align: center;
          margin-top: 15px;
          color: var(--login-copyright-color);
        }
      }
    }

    .login-desc {
      width: 90%;
      text-align: center;
      font-size: 13px;
      margin-top: 8px;
      color: var(--login-desc-color);
      margin-left: auto;
      margin-right: auto;
    }
  }
}
